<script lang="ts" setup>
import { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons-vue';
import type { UnwrapRef } from 'vue';
import { message } from 'ant-design-vue';

const formRef = ref()
const modal1Visible = ref<boolean>(false);  // 帮助
const feedback = ref<boolean>(false);  //  反馈

const value3 = ref<string>('');  //  问题

interface Person {
  name: string   //  问题类型
  title: string  // 反馈概括
  sketch?: string   //  简述
}

// 初始数据 
const formState: UnwrapRef<Person> = reactive({
  title: '',
  name: '1',
  sketch: ''
})

// 类型校验
const rules = {
  title: [
    { required: true, message: '请输入内容', trigger: 'change' },
    { min: 5, message: '字数至少5位以上', trigger: 'blur' },
    {
      pattern: /^[^, ]+$/,
      message: '不允许包含空格或逗号',
      trigger: 'blur',
    },
  ]
}



// 帮助弹框
const setModal1Visible = (open: boolean) => {
  modal1Visible.value = open;
};

// 反馈弹框
const setFeedback = (open: boolean) => {
  feedback.value = open;
}
const setFeedback1 = (open: boolean) => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState))
      formState.title = '';
      formState.name = '1';
      formState.sketch = '';
      message.success('提交成功');
      feedback.value = open;
    })
    .catch(error => {
      console.log('error', error)
    })

}
</script>

<template>
  <!-- 浮动按钮 -->
  <a-float-button-group shape="circle" :style="{ right: '24px' }">
    <!-- 帮助 -->
    <a-tooltip placement="top">
      <!-- 提示词 -->
      <template #title>
        <span>帮助</span>
      </template>
      <a-float-button @click="setModal1Visible(true)">
        <template #icon>
          <QuestionCircleOutlined />
        </template>
      </a-float-button>
    </a-tooltip>

    <!-- 帮助弹框 -->
    <a-modal v-model:open="modal1Visible" title="如有疑问请联系开发人员:" style="top: 20px" @ok="setModal1Visible(false)"
      okText="确定" cancelText="取消">
      <img style="width: 100%;" src="@/assets/Help.png" alt="">
    </a-modal>

    <!-- 反馈按钮 -->
    <a-tooltip placement="top">
      <!-- 提示题 -->
      <template #title>
        <span>反馈</span>
      </template>
      <a-float-button @click="setFeedback(true)" />
    </a-tooltip>

    <!-- 反馈弹框 -->
    <a-modal v-model:open="feedback" title="反馈" style="top: 20%" @ok="setFeedback1(false)" okText="确定" cancelText="取消">
      <a-divider />
      <!-- 类型校验 -->
      <a-form class="login-name" ref="formRef" :model="formState" :rules="rules">
        <!-- 反馈类型 -->
        <a-form-item label="反馈类型" ref="name" name="name">
          <a-radio-group v-model:value="formState.name" name="radioGroup">
            <a-radio value="1">产品侵权</a-radio>
            <a-radio value="2">网页质量</a-radio>
            <a-radio value="3">其他问题</a-radio>
          </a-radio-group>
        </a-form-item>

        <!-- 反馈内容概况 -->
        <a-form-item label="需求" ref="title" name="title">
          <a-textarea v-model:value="formState.title" placeholder="请用一句话描述你的问题"
            :auto-size="{ minRows: 1, maxRows: 5 }" />
        </a-form-item>
      </a-form>

      <a-form-item label="简述" ref="sketch" name="sketch">
        <a-textarea v-model:value="formState.sketch" placeholder="请在此详细描述你的需求，如产品侵权，网页质量问题等，未提供或描述不清，将作为无效问题。"
          :auto-size="{ minRows: 10, maxRows: 5 }" />
      </a-form-item>
    </a-modal>


    <!-- 返回顶部 -->
    <a-tooltip placement="top">
      <!-- 提示题 -->
      <template #title>
        <span>返回顶部</span>
      </template>
      <a-back-top :visibility-height="0" />
    </a-tooltip>
  </a-float-button-group>


</template>


<style lang='scss' scoped></style>